theme: Add message close button styling

Since the notification message close button had no border, or mouse
over effect, there was no way to determine whether the mouse cursor
were over the button.

Improve this by adding a message-close-button class for the close
button, and a styling for its hovered state, based on media control
button styling.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/855

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index bddcedf2421ece5a6c6143acd8540dda8ce02f0b..cd6eea7d94915763b19c24c2aa657c9dc96ab014 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1152,6 +1152,11 @@ StScrollBar {
             padding: 10px;
           }
 
+          .message-close-button {
+            color: lighten($fg_color, 15%);
+            &:hover { color: darken($fg_color, 10%); }
+          }
+
           .message-media-control {
             padding: 12px;
             color: lighten($fg_color, 15%);

diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 3188d0377fa67fd512a6deb67cd624ebfc328220..e798d0bfc329b88618bd133d6735642093dd861f 100644 (file)
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -357,7 +357,10 @@ var Message = GObject.registerClass({
 
         let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                       icon_size: 16 });
-        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
+        this._closeButton = new St.Button({
+            style_class: 'message-close-button',
+            child: closeIcon, opacity: 0,
+        });
         titleBox.add_actor(this._closeButton);
 
         this._bodyStack = new St.Widget({ x_expand: true });